<template>
  <div class="container">
    <div class="form-list flex">
      <!-- 数据保存 -->
      <div class="form-lidt-l box-radius">
        <div class="form-list-title">数据保存</div>
        <el-form ref="saveForm" :model="saveForm" label-width="120px" label-position="left">
          <el-form-item label="关键检测数据" class="flex-item">
            <el-input-number
              class="marg-rt"
              size="small"
              v-model="saveForm.monitorTime"
              controls-position="right"
              :min="3"></el-input-number
            >年
            <el-tooltip content="关键检测数据最少保存3年" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
            <span>(最小值为3年)</span>
          </el-form-item>
          <el-form-item label="汇聚数据" prop="aggrTime">
            <el-input-number
              class="marg-rt"
              size="small"
              v-model="saveForm.aggrTime"
              controls-position="right"
              :min="6"></el-input-number
            >月
            <el-tooltip content="汇聚数据最少保存6个月" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
            <span>(最小值为6个月)</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="handleSave">提交</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 上传系统升级zip包 -->
      <div class="form-lidt-l box-radius">
        <div class="form-list-title">系统升级</div>
        <el-form ref="updateForm" label-width="120px" label-position="left">
          <el-form-item label="系统升级补丁包" prop="file">
            <el-upload
              ref="upload"
              accept=".zip"
              drag
              :limit="1"
              :action="upload.url"
              :on-change="handleFileUploadProgress"
              :show-file-list="false"
              :auto-upload="true">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <!-- <div><span>支持扩展名：.zip</span></div> -->
            </el-upload>
            <div class="tip">
              <span>支持扩展名：.zip</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 备份恢复列表 -->
    <div class="form-list table-wrap">
      <div class="box-radius hk-flex">
        <div class="form-list-title">备份恢复</div>
        <HKSearchform
          class="search-form"
          :data="queryParams"
          :field-list="filterInfo.fieldList"
          @handleSearch="handleQuery"
          @handleReset="resetQuery"
          @handleEvent="handleEvent" />

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" size="mini" @click="handlePackage">选择备份数据库</el-button>
          </el-col>
        </el-row>

        <HkTable
          ref="tables"
          :loading="loading"
          :total="total"
          :tableData="tableList"
          :tableColumns="tableFieldList"
          :showIndex="true"
          :operate="true"
          @changePage="getListData">
          <template #operate="scope">
            <el-button size="mini" type="text" @click="handleRollback(scope.row)">恢复</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </HkTable>

        <!-- 选择打包内容弹窗 -->
        <Backup ref="BackupDialog" @handleBackup="handleBackup" />
      </div>
    </div>
  </div>
</template>

<script>
import HKSearchform from '@/components/HKSearchform/index.vue'
import HkTable from '@/components/HKTable'
import { parseTime } from '@/utils/hongke'
import { getConfig, saveConfig, getBackupsList, rollbackBackups, deleteBackups } from '@/api/recovery/index'
import Backup from './components/backup.vue'

export default {
  components: { HKSearchform, HkTable, Backup },
  data() {
    return {
      /** 保存数据表单 */
      saveForm: {
        monitorTime: 3,
        aggrTime: 6,
      },
      /** 上传组件参数 */
      upload: {
        url: window.baseUrl+'/system/upgrade/doUpgrade',
      },
      // 搜索项配置
      filterInfo: {
        fieldList: [
          { label: '数据库名称', type: 'input', field: 'databaseName' },
          { label: '操作时间', field: 'dateRange', type: 'dateRange' },
        ],
      },
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        databaseName: undefined,
        dateRange: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      //  表格数据
      tableList: [],
      //  表格配置项
      tableFieldList: [
        { label: '数据库名称', param: 'databaseName' },
        { label: '备份文件名称', param: 'backupsName' },
        { label: '恢复次数', param: 'operation' },
        { label: '创建时间', param: 'createTime' },
        { label: '上次恢复时间', param: 'recoveryTime' },
      ],
    }
  },
  mounted() {
    this.getConfigInfo()
    this.getListData()
  },
  methods: {
    /** 获取配置信息 */
    getConfigInfo() {
      getConfig().then((res) => {
        this.saveForm.monitorTime = res?.monitorTime.match(/\d+/g).map(Number)[0] || 3
        this.saveForm.aggrTime = res?.aggrTime.match(/\d+/g).map(Number)[0] || 6
      })
    },
    /** 保存配置信息 */
    handleSave() {
      saveConfig(this.saveForm.monitorTime + 'y').then((res) => {
        if (res.code !== 200) {
          this.$message.error(res.msg)
        }
      })
      saveConfig(this.saveForm.aggrTime + 'M').then((res) => {
        if (res.code == 200) {
          this.$message.success('配置已保存')
          this.getConfigInfo()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    /** 上传升级压缩包 */
    handleFileUploadProgress(file) {
      if(file.status=='success'){
        if (file?.response?.code == 200) {
        this.$message.success('升级包已上传')
        this.$refs.upload.clearFiles();
      }else{
        if(file?.response?.msg){
          this.$message.error(file?.response?.msg)
          this.$refs.upload.clearFiles();
        }
      }
      }
     
    },
    /** 搜索框绑定事件 */
    handleEvent(obj) {
      this.queryParams[obj.field] = obj.value
    },
    /** 搜索 */
    handleQuery() {
      this.queryParams.current = 1
      this.queryParams.startTime = this.queryParams.dateRange
        ? parseTime(this.queryParams.dateRange[0], '{y}-{m}-{d} {h}:{i}:{s}')
        : undefined
      this.queryParams.endTime = this.queryParams.dateRange
        ? parseTime(this.queryParams.dateRange[1], '{y}-{m}-{d} {h}:{i}:{s}')
        : undefined
      this.getListData()
    },
    /** 重置 */
    resetQuery() {
      this.queryParams = {
        current: 1,
        size: 10,
        databaseName: undefined,
        dateRange: undefined,
        startTime: undefined,
        endTime: undefined,
      }
      this.getListData()
    },
    /** 选择打包内容 */
    handlePackage() {
      this.$refs['BackupDialog'].open = true
    },
    /** 获取列表 */
    getListData(val) {
      if(val){
        this.queryParams.size=val.size;
        this.queryParams.current=val.current;
      }
      getBackupsList(this.queryParams).then((res) => {
        this.tableList = res.list
        this.total = res.total
        this.loading = false
      })
    },
    /** 恢复 */
    handleRollback(row) {
      rollbackBackups(row.id).then((res) => {
        this.$message.success('恢复成功')
        this.resetQuery()
      })
    },
    /** 删除 */
    handleDelete(row) {
      deleteBackups(row.id).then((res) => {
        this.$message.success('删除成功')
        this.resetQuery()
      })
    },
    /** 打包弹窗关闭后 */
    handleBackup() {
      this.resetQuery()
    },
  },
}
</script>

<style lang="scss" scoped>
#app.dark-theme{
  .container,.container .form-list{
    color:#fff;
    background:transparent;
  }
  .container .form-list .box-radius{
    background:rgba(59, 139, 255, 0.1) !important
  }
  .container .el-icon{
    color:#fff !important;
  }
}
.hk-flex{
  display: flex;
  flex-direction: column;
}
::v-deep .el-form-item {
  margin-bottom: 20px;
}
::v-deep .targetTable{
  flex:1;
}
::v-deep .el-table__body-wrapper{
  max-height:600px;
  overflow-y: auto;
}
.container {
  height: 100%;
  background: #eef0f5;
  overflow:auto;
  .marg-rt {
    margin-right: 5px;
  }

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }

  .form-list-title {
    margin-bottom: 20px;
  }

  .el-icon {
    margin: 0 10px 0 5px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.45);
    vertical-align: middle;
  }

  .form-list {
    background: #eef0f5;
    margin-bottom: 20px;

    .box-radius {
      padding: 20px;
      border-radius: 4px;
      background: #fff;
    }

    .form-lidt-l {
      width: calc(50% - 10px);
    }

    .search-form {
      ::v-deep .el-form-item {
        margin-bottom: 0px !important;
      }
    }
  }
}
</style>
